<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登陆</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
    <style>
        div {
            line-height: 30px;
        }

        input {
            width: 150px;
        }

        .btn {
            margin-top: 20px;
            width: 300px;
            height: 30px;
        }

        .btn_code {
            padding: 2 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        手机号： <input type="tel" placeholder="请输入手机号" v-model="mobile"/>
    </div>
    <div>
        验证码： <input type="text" placeholder="请输入验证码" v-model="vcode"/>
        <button class="btn_code" :disabled="!codeBtnEnable" @click="getVCode">{{countDownSecond == 60 ? codeBtnValue :
            countDownSecond+'秒'}}
        </button>
    </div>
    <div>
        <input type="button" class="btn" @click="login" value="登陆"/>
    </div>
</div>
</body>
</html>
<script>
    var tokenKey = "tilesrowjwt";
    var app = new Vue({
        el: '#app',
        data: {
            mobile: "13552453626",
            vcode: "",
            codeBtnValue: "获取验证码",
            codeBtnEnable: true,
            baseUrl: 'http://ad-dog-origimg.bomeiyi.net/',
            countDownInter: null,
            countDownSecond: 60
        },
        methods: {
            login: function () {
                if (this.mobile == "") {
                    alert("请输入手机号");
                    return
                }
                if (this.vcode == "") {
                    alert("请输入验证码");
                    return
                }
                self = this;
                $.ajax({
                    url: "/user/doLogin",
                    type: "post",
                    data: {
                        mobile: this.mobile,
                        vcode: this.vcode
                    },
                    success: function (res) {
                        if (res.state == "ok") {
                            localStorage.setItem(tokenKey, arguments[2].getResponseHeader(tokenKey));
                            window.location.href = "/user/info"
                        } else {
                            alert(res.message);
                        }
                    },
                    error: function (a, b, c) {

                    }
                })

            },
            getVCode: function () {
                if (!this.codeBtnEnable) {
                    return;
                }
                if (this.mobile == "") {
                    alert("请输入手机号");
                    return
                }
                this.codeBtnEnable = false;
                self = this;
                $.ajax({
                    url: "/user/getSMSVCode",
                    type: "get",
                    data: {
                        mobile: this.mobile
                    },
                    success: function (res) {
                        if (res.state == "ok") {
                            self.startCountDown();
                        } else {
                            alert(res.message);
                            self.codeBtnEnable = true;
                        }
                    },
                    error: function (a, b, c) {
                        self.codeBtnEnable = true;
                    }
                })
            },
            startCountDown: function () {
                var self = this;
                this.countDownInter = setInterval(function () {
                    if (self.countDownSecond > 0) {
                        self.countDownSecond--;
                    } else {
                        self.countDownSecond = 60
                        clearInterval(self.countDownInter)
                        self.codeBtnEnable = true;
                    }
                }, 1000)
            }
        },
        filters: {
            timeFilter: function (value) {
                return parseFloat(value).toFixed(2);
            }
        }
    })
</script>